<template>
    <div class="sdy-home-goods-list">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="goods-list-box" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                @load="loadGoodsListHandler" :offset="100">
                <div class="goods-item" v-for="item in goodsList" :key="item.proid">
                    <img :src="item.img1" alt="">
                    <p class="title van-multi-ellipsis--l2">
                        {{ item.proname }}</p>
                    <p class="price">
                        <span class="current">
                            ￥{{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) :
                                    item.originprice.toFixed(2)
                            }}
                        </span>
                        <span class="old">
                            ￥{{ item.originprice.toFixed(2) }}
                        </span>
                    </p>
                    <p class="tags">
                        <van-tag type="danger">{{ item.category }}</van-tag>
                        <van-tag type="primary">{{ item.brand }}</van-tag>
                    </p>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
// 引入获取商品列表（分页）api接口
import { goodListApi } from '@/api/goods'
// 引入ts接口
import type { MyHotItem } from '@/config/interface'
// 控制变量
// 加载数据的时候把loading设置为true
// 当数据加载完毕后把loading设置为false
const finished = ref<boolean>(false)
const loading = ref<boolean>(false)

//准备一个变量，用于下拉刷新控制器
const refreshing = ref<boolean>(false)

//准备一个数据，存储商品列表数据
const goodsList = ref<MyHotItem[]>([])

//准备一个数据表示请求相关数据
const goodsInfo = reactive({ count: 1, limit: 10 })

// 滚动到底部触发的时间
const loadGoodsListHandler = () => {
    // 在随机时间内加载
    setTimeout(async () => {
        const res = await goodListApi({ count: 1, limit: 10 })
        // console.log(res);
        // 不能直接替换数组，而是将往后的数据添加到数组中
        goodsList.value = [...goodsList.value, ...res.data]
        // 修改goodsInfo内的值，使下次加载时变成第二页
        goodsInfo.count++
        // 把加载完毕的状态修改为false
        loading.value = false
        // 判断如果res.data为空时，说明数据已加载完全部，将停止loading
        if (!res.data.length) finished.value = true
    }, Math.random() * 1000 + 2000);

}

//下拉刷新时执行的代码
const onRefresh = async () => {
    setTimeout(async () => {
        console.log('下拉');
        // 刷新前先使数据为第一页(2-7)
        goodsInfo.count = Math.floor(Math.random() * 5 + 2)
        // 请求数据
        const res = await goodListApi(goodsInfo)
        // 替换数组，重新渲染页面
        goodsList.value = res.data
        // 刷新后当前页++
        goodsInfo.count++
        // 加载完后将下拉刷新为false
        refreshing.value = false
        // 刷新以后可以从新加载，避免刷新的页面为最后一页，下拉无数据
        finished.value = false
    }, Math.random() * 1000 + 2000);

}
</script>
<style scoped lang="scss">
@import '@/styles/variable.scss';

.sdy-home-goods-list {
    box-sizing: border-box;
    padding: 0 15px;

    .goods-list-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .goods-item {
        width: 45%;
        border: 1px solid #333;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-content: center;
        margin-bottom: 5px;
        overflow: hidden;
        padding-bottom: 5px;

        >p {
            margin: 0px;
        }

        >img {
            width: 170px;
            height: 170px;
            display: block;
        }

        >.title {
            font-size: 12px;
        }

        >.price {
            font-size: 12px;
            color: #ccc;
            width: 100%;
            display: flex;
            justify-content: space-evenly;

            >.current {
                font-size: 16px;
                color: $globalColor;
            }

            >.old {
                text-decoration: line-through;
            }
        }

        >.tags {
            width: 100%;
            display: flex;
            justify-content: space-evenly;
        }
    }
}
</style>